<template>
	<div id='BMRSchart' style="width: 500px;height:280px;margin:0 auto;"></div>
</template>

<script>
import * as echarts from 'echarts'
import {GETDEPARTMENTUSER} from '@/../static/js/apis.js'

export default{
	name: "BMRSchart",
	data () {
	  	return {

	  	}
      },
	methods: {
		//绘制图形
		drawChart (datax,data) {
			let myChart = echarts.init(document.getElementById('BMRSchart'))
			let options = {
			    title: {
			        text: '各部门人数',
			        left: 'left'
			    },
			       tooltip: {
				        trigger: 'axis',
				        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
				            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: datax,
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
                    minInterval:1
				        }
				    ],
				    series: [
				        {
				            type: 'bar',
				            barWidth: '60%',
				            data: data,
				               itemStyle:{
						            normal:{
						                color:function(params){
						                    var colorlist = ['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc'];
						                    return colorlist[params.dataIndex];
						                }
						            }
						        }
				        }
				    ]
			};
			myChart.setOption(options, true)
		},
		getData () {
			const datax=[]
			const data=[]
			const self = this;
			 GETDEPARTMENTUSER('', function (res) {
		        	if(res.data){
		        		res.data.forEach(function(item, index) {
                                   datax.push(item.name)
                                   data.push(item.value)
				      })
					//绘制图形
					self.drawChart(datax,data);
				}
		        })
	     }
     },
	mounted () {
		this.getData ();
	}
}

</script>

<style scoped>

</style>
